<template>
	<div class="home">
		<div class="home-container">
			<div class="home-menu">
				<div class="menu-header">
					<img :src="shop.avatar" class="shop-avatar" />
					<div class="team-info">
						{{ shop.name }}
					</div>
				</div>
				<div class="menu-box">
					<div class="menu-list">
						<div tag="div" class="menu-item">
							<i class="iconfont icon-haoyou"></i>
							<span v-if="unreadAmount + pendingConversationAmount"
								class="menu-unread">{{ unreadAmount + pendingConversationAmount}}</span>
						</div>
						<!-- <router-link tag="div" class="menu-item" to="/pages/chat/customers" replace>
							<i class="iconfont icon-haoyou"></i>
						</router-link> -->
					</div>
					<div class="agent-info">
						<img :src="currentAgent.avatar" class="agent-avatar"
							@click="onlineConfig.visible = !onlineConfig.visible" />
						<span :class="onlineConfig.online ?'spot online':'spot offline'"></span>
						<div class="agent-name">{{ currentAgent.name }}</div>
					</div>
					<div v-if="onlineConfig.visible" class="action-wrap" @click.prevent="closeOnlinePopup()">
						<div v-if="onlineConfig.visible" class="action-box">
							<div class="action-item" @click="online">
								<div :class="onlineConfig.online ? 'checked': 'action-title'">客服在线</div>
								<div class="action-detail">接收客服消息通知</div>
							</div>
							<div class="action-item" @click="offline">
								<div :class="!onlineConfig.online ? 'checked': 'action-title'">客服离线</div>
								<div class="action-detail">不接收客服消息通知</div>
							</div>
							<div class="action-item" @click="logout">
								<div class="action-title">退出登录</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="home-main" >
				<conversations></conversations>
				<!-- <router-view /> -->
			</div>
		</div>
	</div>
</template>

<script>
	import iGoEasy from 'goeasy';
	import customers from './customers';
	import conversations from './conversations';
	import chat from './chat';
	export default {
		components: { customers, conversations, chat },
		name: 'Home',
		data() {
			let goEasy 
			let GoEasy
			return {
				csteam: null,
				currentAgent: null, 
				shop: null,
				unreadAmount: 0,
				pendingConversationAmount: 0,

				onlineConfig: {
					visible: false,
					online: false
				}
			};
		},
		created() {
			let  userInfo=uni.getStorageSync('wmzadmin_user')
			if(!userInfo.app_key){
				alert('初始化失敗,');
				return
			}
			this.GoEasy=iGoEasy
			this.goEasy = iGoEasy.getInstance({
				host: 'hangzhou.goeasy.io',	//应用所在的区域地址: 【hangzhou.goeasy.io |singapore.goeasy.io】
				appkey: userInfo.app_key, // common key,
				modules: ['im']
			}); 
			this.currentAgent = {
				id: userInfo._id,
				name: userInfo.nickname,
				avatar: '/static/kefu.png',
				phone: userInfo.mobile,
				shopId: userInfo.shop_id
			}
			this.shop = {
				name: '',
				avatar: '/static/kefu.png',
				id: userInfo.shop_id,
				goods: []
			}
			
			this.csteam = this.goEasy.im.csteam(this.currentAgent.shopId);

			if (this.goEasy.getConnectionStatus() === 'disconnected') {
				this.connectGoEasy(); //连接goeasy
			}
			this.initialOnlineStatus();
			this.goEasy.im.on(this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this.setUnreadAmount);
			this.goEasy.im.on(this.GoEasy.IM_EVENT.PENDING_CONVERSATIONS_UPDATED, this.setPendingConversationAmount);
		},
		methods: {
			connectGoEasy() {
				let currentAgent = this.currentAgent;
				this.goEasy.connect({
					id: currentAgent.id,
					data: {
						name: currentAgent.name,
						avatar: currentAgent.avatar
					},
					onSuccess: function() { //连接成功
						console.log("GoEasy connect successfully.") //连接成功
					},
					onFailed: function(error) { //连接失败
						console.log("Failed to connect GoEasy, code:" + error.code + ",error:" + error
							.content);
					},
					onProgress: function(attempts) { //连接或自动重连中
						console.log("GoEasy is connecting", attempts);
					}
				});
			},
			setUnreadAmount(content) {
				this.unreadAmount = content.unreadTotal;
			},
			setPendingConversationAmount(content) {
				this.pendingConversationAmount = content.conversations.length;
			},
			initialOnlineStatus() {
				this.csteam.isOnline({
					onSuccess: (result) => {
						this.onlineConfig.online = result;
					},
					onFailed: (error) => {
						console.log('获取在线状态失败，error:', error)
					}
				})
			},
			offline() {
				if (this.onlineConfig.online === false) {
					return
				}
				this.csteam.offline({
					onSuccess: () => {
						this.onlineConfig.online = false;
						console.log('已下线', this.currentAgent);
					},
					onFailed: (error) => {
						console.log('下线失败,error:', error);
						if (error.content === 'Please end your accepted conversations first') {
							alert('下线失败，请先结束已接入的会话！');
						}
					}
				})
			},
			online() {
				if (this.onlineConfig.online === true) {
					return
				}
				this.csteam.online({
					teamData: {
						name: this.shop.name,
						avatar: this.shop.avatar
					},
					agentData: {
						name: this.currentAgent.name,
						avatar: this.currentAgent.avatar
					},
					onSuccess: () => {
						this.onlineConfig.online = true;
						console.log('已上线', this.currentAgent);
					},
					onFailed: (error) => {
						console.log('上线失败,error:', error);
					}
				})
			},
			logout() {
				if (confirm('确认要退出登录吗？')) {
					this.goEasy.disconnect({
						onSuccess: () => {
							this.globalData.currentAgent = null;
							this.$router.replace({
								path: './login'
							});
						},
						onFailed: (error) => {
							console.log("Failed to disconnect GoEasy, code:" + error.code + ",error:" + error
								.content);
						}
					});
				}
			},
			closeOnlinePopup() {
				this.onlineConfig.visible = false;
			}
		},
	};
</script>

<style scoped>
	@media screen and (max-width:1000px) {
		.home-container {
			width: 850px;
			height: 430px;
		}
	}

	@media screen and (min-width:1000px) {
		.home-container {
			width: 850px;
			height: 650px;
		}
	}

	.home {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.home-container {
		background: #FFFFFF;
		display: flex;
		position: relative;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.home-menu {
		width: 60px;
		background-color: #F7F7F7;
		border-right: 1px solid #eeeeee;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.shop-avatar {
		width: 50px;
		height: 50px;
		border-radius: 10px;
	}

	.menu-header {
		position: relative;
		margin: 20px auto;
		cursor: pointer;
		padding:10px;
	}

	.menu-header:hover .team-info {
		display: block;
		text-decoration: none;
	}

	.team-info {
		display: none;
		position: absolute;
		bottom: -20px;
		left: 0;
		right: 0;
		z-index: 1;
		width: 100px;
		padding: 0 8px;
		border: 0.5px solid rgba(108, 90, 90, 0.15);
		border-radius: 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
		color: rgba(0, 0, 0, 0.5);
	}

	.menu-box {
		padding: 40px 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.menu-list {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-list .iconfont {
		padding: 15px;
		font-size: 28px;
		color: #606266;
	}

	.menu-item {
		color: #303133;
		cursor: pointer;
		height: 56px;
		position: relative;
	}

	.menu-unread {
		position: absolute;
		top: -5px;
		right: 5px;
		width: 18px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		border-radius: 50%;
		background-color: #fa5151;
		color: #ffffff;
	}

	.router-link-active i {
		color: #d02129 !important;
	}

	.agent-info:hover .agent-name {
		visibility: visible;
		text-decoration: none;
	}

	.agent-info {
		position: relative;
	}

	.agent-avatar {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		position: relative;
		cursor: pointer;
	}

	.agent-info .spot {
		position: absolute;
		left: 34px;
		top: 34px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.agent-info .online {
		background-color: #56d547;
	}

	.agent-info .offline {
		background-color: #999999;
	}

	.agent-name {
		visibility: hidden;
		position: absolute;
		top: 32px;
		bottom: 0;
		left: 32px;
		right: 0;
		border: 0.5px solid rgba(108, 90, 90, 0.15);
		border-radius: 4px;
		width: fit-content;
		max-width: 120px;
		height: 24px;
		line-height: 24px;
		padding: 0 8px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: break-word;
		background: #fff;
		color: rgba(0, 0, 0, 0.5);
		font-size: 12px;
		font-weight: 400;
		transition: all 0.4s 0.4s;
	}

	.action-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}

	.action-box {
		position: absolute;
		left: 60px;
		bottom: 40px;
		width: 150px;
		padding: 10px;
		background: #fff;
		border-radius: 10px;
		font-size: 14px;
		z-index: 3;
		box-shadow: 2px 8px 20px #999999;
	}

	.action-item {
		display: flex;
		flex-direction: column;
	}

	.action-item:hover {
		cursor: pointer;
	}

	.action-title {
		margin: 5px 0;
	}

	.action-detail {
		color: #5c5a5a;
		font-size: 12px;
		padding: 5px 0;
		border-bottom: 1px solid #efeeee;
	}

	.action-item .checked {
		margin: 5px 0;
		background: url("../../assets/images/tick.png") no-repeat center center;
		background-size: 15px;
	}

	.home-main {
		padding-top: 50px;
		flex: 1;
	}
</style>